<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="mt-4 text-right">
        <el-button size="small" type="primary" @click="addClick">
          新增场次
        </el-button>

      </div>

      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        class="mt-3"
        stripe
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="场次名称" prop="name"></el-table-column>
        <el-table-column label="面试开始时间" prop="start_at"></el-table-column>
        <el-table-column label="面试结束时间" prop="end_at"></el-table-column>
        <el-table-column label="面试房间" prop="room_code"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="danger">
              未开始
            </el-tag>
            <el-tag v-if="scope.row.status === 1" type="primary">
              进行中
            </el-tag>
            <el-tag v-if="scope.row.status === 2" type="success">
              已结束
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <cus-pagination
        v-show="listQuery.total > 0"
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="listQuery.total"
        @pagination="getTableData"
      />

      <el-dialog
        :title="title"
        :visible.sync="visibleAdd"
        width="30%"
        @close="closeDialog('newHeadlines')">
        <el-form ref="newHeadlines" :inline="false" :model="newHeadlinesForm" :rules="rules" label-width="120px"
                 size="normal">
          <el-form-item label="场次名称" prop="name">
            <el-input v-model.number="newHeadlinesForm.name"></el-input>
          </el-form-item>
          <el-form-item label="面试开始时间" prop="start_at">
            <el-date-picker
              v-model="newHeadlinesForm.start_at"
              placeholder="选择面试开始时间"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="startDatePicker">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="面试结束时间" prop="end_at">
            <el-date-picker
              v-model="newHeadlinesForm.end_at"
              placeholder="选择面试结束时间"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="endDatePicker">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="面试房间" prop="room_id">
            <el-input v-model.number="newHeadlinesForm.room_id" type="number"></el-input>
          </el-form-item>

        </el-form>

        <span slot="footer">
          <el-button @click="visibleAdd = false">返回</el-button>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>

import {InterviewAdd, InterviewList} from "@/api/anchorManagement/anchorInterviewSetting";

export default {
  name: "anchorInterviewSetting",
  components: {},
  data() {
    return {
      startDatePicker:this.beginDate(),
      endDatePicker:this.processDate(),
      nowScore: '',
      title: '',
      visibleAdd: false,
      loading: false,
      giveAwayModal: {
        visible: false,
        detail: {}
      },
      addEditModal: {
        visible: false,
        status: "Add",
        detail: {}
      },
      statusOption: [
        {label: "在榜", value: 1},
        {label: "不在榜", value: 0}
      ],
      statusOption1: [
        {label: "是", value: 1},
        {label: "否", value: 0}
      ],
      options: [],
      parentList: [],
      tableData: [],
      listQuery: {
        page: 1,
        perPage: 10,
        total: 1,
        user_code: undefined,
        nickname: undefined,
        is_in_list: undefined,
        is_admin: undefined,
        created_start_at: undefined,
        created_end_at: undefined
      },
      newHeadlinesForm: {
        "name": undefined,
        "room_id": "",
        "start_at": undefined,
        end_at: ''
      },
      rules: {
        name: [{required: true, message: '请选择场次名称', trigger: 'blur'}],
        room_id: [{required: true, message: '请输入面试房间', trigger: 'blur'}],
        start_at: [{required: true, message: '请输入开始时间', trigger: 'blur'}],
        end_at: [{required: true, message: '请输入结束时间', trigger: 'blur'}],

      },
      headlineStatus: '',
    };
  },
  created() {
    this.getTableData();
    // this.GetUserAccount()
  },
  methods: {
    beginDate(){
      let self = this
        return {
            disabledDate(time){
              if(self.newHeadlinesForm.end_at){
                if ( new Date(self.newHeadlinesForm.start_at).getTime() >= new Date(self.newHeadlinesForm.end_at).getTime()) {
                  // self.newHeadlinesForm.start_at = undefined;
                  // self.$message.warning("结束时间必须大于开始时间");
                }else {
                  return time.getTime() < Date.now() - 8.64e7//开始时间不选时，结束时间最大值小于等于当天
                }
              }else {
                return time.getTime() < Date.now() - 8.64e7//开始时间不选时，结束时间最大值小于等于当天
              }
              
            }
        }
    },
    //提出结束时间必须大于提出开始时间
    processDate(){
        let self = this
        return {
            disabledDate(time){
                if(self.newHeadlinesForm.start_at){
                    return new Date(self.newHeadlinesForm.start_at).getTime() > time.getTime()
                }else{
                    return time.getTime() < Date.now() - 8.64e7 //开始时间不选时，结束时间最大值小于等于当天
                }
            }
        }
    },
    // 点击事件
    /**
     * addClick
     * @desc 点击新增 按钮
     */
    addClick() {
      this.headlineStatus = "Add";
      this.title = '新增场次'
      this.newHeadlinesForm.score = undefined
      this.visibleAdd = true;
    },

    // 新增场次
    onSubmit() {
      this.$refs['newHeadlines'].validate(valid => {
        
        if (valid) {
          if (this.newHeadlinesForm.start_at >= this.newHeadlinesForm.end_at) {
            return void this.$message({
              message: '开始时间不能大于结束时间',
              type: 'warning'
            })
          }

          InterviewAdd(this.newHeadlinesForm).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.getTableData()
              this.visibleAdd = false
            }
          })
        }
      })
    },

    // 网络请求
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {

      this.loading = true;
      for (let key in this.listQuery) {
        this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      const detail = await InterviewList(this.listQuery);
      if (detail.code === 200) {
        this.tableData = detail.data.data;
        this.listQuery.page = detail.data.current_page;
        this.listQuery.total = detail.data.total;
        this.listQuery.perPage = parseInt(detail.data.per_page);
        this.loading = false;
      }
    },
    closeDialog(form) {
      if (this.$refs[form]) {
        this.$refs[form].clearValidate() // 清除整个表单的校验
        this.$refs[form].resetFields() // 清除整个表单的校验
      }
      this.headlineStatus = ''
      this.newHeadlinesForm.id = undefined
      this.newHeadlinesForm.score = undefined
      this.nowScore = '';
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
